import React, { PureComponent, Fragment, Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
  Row, Col, Card, Form, Input, Radio, Select, Icon, Button, List, Modal, message, DatePicker, TreeSelect, Tag, InputNumber,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import GoodsModal from 'components/Coupon/GoodsModal';
import ChannelModal from 'components/Coupon/ChannelModal';

import TextArea from 'antd/lib/input/TextArea';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const { Option } = Select;
const { CheckableTag } = Tag;

const formItemLayout1 = {
  labelCol: {
    xs: { span: 14 },
    sm: { span: 2 },
    md: { span: 2 },
    lg: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 8 },
    sm: { span: 8 },
    md: { span: 8 },
    lg: { span: 8 },
  },
};

const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 10 } }

@connect(({ fran, loading }) => ({
  fran,
  franDetail: fran.franDetail,
  loading: loading.models.fran,
}))
@Form.create()
export default class EditFran extends PureComponent {
  state = {
    franDetail: null,
  };

  componentDidMount() {
    if (this.props.match.params.franId != 'new') {
      this.props.dispatch({
        type: 'fran/fetchDetail',
        payload: { franId: this.props.match.params.franId },
        callback: (data) => this.setState({ franDetail: data })
      });
    }
  }

  _submit() {
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) return;

      console.log('表单提交数据：：：：？？？', fieldsValue)

      if (fieldsValue.franId) {
        this.props.dispatch({
          type: 'fran/editFran',
          payload: fieldsValue,
          callback: () => { this.props.dispatch(routerRedux.goBack()) }
        });
      } else {
        this.props.dispatch({
          type: 'fran/addFran',
          payload: fieldsValue,
          callback: () => { this.props.dispatch(routerRedux.goBack()) }
        });
      }
    });
  }

  render() {
    const { form, } = this.props;
    const { franDetail } = this.state;
    return (
      <PageHeaderLayout title="">
        <Card>
          <Form>
            {franDetail ?
              <FormItem {...formItemLayout} label="id" style={{ display: 'none' }}>
                {form.getFieldDecorator('franId', {
                  rules: [{ required: true, message: 'id' }],
                  initialValue: franDetail ? franDetail.franId : null,
                })(<Input placeholder="id" />)}
              </FormItem>
              :
              null
            }

            <FormItem {...formItemLayout} label="加盟商名称" >
              {form.getFieldDecorator('franName', {
                rules: [{ required: true, message: '请输入加盟商名称' }],
                initialValue: franDetail ? franDetail.franName : null,
              })(<Input placeholder="请输入加盟商名称" maxLength={10} />)}
            </FormItem>

            <FormItem {...formItemLayout} label="联系人" >
              {form.getFieldDecorator('franUser', {
                rules: [{ required: true, message: '请输入联系人' }],
                initialValue: franDetail ? franDetail.franUser : null,
              })(<Input placeholder="请输入联系人" maxLength={10} />)}
            </FormItem>

            <FormItem {...formItemLayout} label="联系电话" >
              {form.getFieldDecorator('franPhone', {
                rules: [{
                  required: true, message: '请输入联系电话',
                  pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
                }],
                initialValue: franDetail ? franDetail.franPhone : null,
              })(<Input placeholder="请输入联系电话" maxLength={12} />)}
            </FormItem>

            <FormItem {...formItemLayout} label="加盟商地址" >
              {form.getFieldDecorator('franAddr', {
                rules: [{ required: true, message: '请输入加盟商地址' }],
                initialValue: franDetail ? franDetail.franAddr : null,
              })(<Input placeholder="请输入加盟商地址" />)}
            </FormItem>

            <FormItem {...formItemLayout} label="M码" >
              {form.getFieldDecorator('mCode', {
                rules: [{ required: true, message: '请输入M码' }],
                initialValue: franDetail ? franDetail.mCode : null,
              })(<Input placeholder="请输入M码" />)}
            </FormItem>

            <FormItem {...formItemLayout} label="加盟商状态">
              {form.getFieldDecorator('franSts', {
                rules: [{ required: true, message: '请选择加盟商状态' }],
                initialValue: franDetail ? '' + franDetail.franSts : "0",
              })(
                <RadioGroup >
                  <RadioButton value="0">正常</RadioButton>
                  <RadioButton value="1">冻结</RadioButton>
                </RadioGroup>
              )}
            </FormItem>

            <FormItem {...formItemLayout} label="佣金比例">
              {form.getFieldDecorator('commRatio', {
                rules: [{ required: true, message: '请输入佣金比例' }],
                initialValue: franDetail ? franDetail.commRatio : null,
              })(
                <InputNumber
                  formatter={value => `${value}%`}
                  parser={value => value.replace('%', '')}
                  min={0} step={1} max={100} precision={0} placeholder="请输入佣金比例" style={{ width: '50%' }} />
              )}
            </FormItem>

            <FormItem {...formItemLayout} label="备注" >
              {form.getFieldDecorator('remark', {
                initialValue: franDetail ? franDetail.remark : null,
              })(<TextArea placeholder="请输入备注" maxLength={200} />)}
            </FormItem>

            <FormItem {...formItemLayout}>
              <Button type="primary" htmlType="submit" onClick={() => this._submit()} style={{ marginLeft: '120px' }} loading={this.props.loading}>
                保存
              </Button>
              <Button type="danger" onClick={() => { this.props.dispatch(routerRedux.goBack()) }} style={{ marginLeft: '15px' }}>
                返回列表
              </Button>
            </FormItem>
          </Form>
        </Card>

      </PageHeaderLayout>
    )
  }
}